<template>
	<view class="order">
		<view class="list_s">
			<image v-if="goodList.img[0] !== ''" :src="goodList.img[0]" mode=""></image>
			<image v-else :src="goodList.img" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{goodList.title}}</p>
				<p class="p2"><text class="text1">{{goodList.price}} x 1</text></p>
				<p class="p3">
					<text class="text2">小计：</text>
					<text class="text1">{{goodList.price}}</text>
				</p>
			</view>
		</view>
		<p style="padding: 20upx; font-weight: bold;">收货信息</p>
		<view>
			<van-cell-group>
			  <van-field
			    :value="name"
			    clearable
				readonly
			    label="收货人"
			    placeholder="请输入收货人"
			    bind:click-icon="onClickIcon"
				@blur="setName"
			  />
			
			  <van-field
			    :value="phone"
			    type="number"
				readonly
			    label="手机号"
				maxlength="11"
			    placeholder="请输入手机号"
				@blur="setPhone"
			  />
			  <van-field
			    :value="address"
			    type="number"
			    label="收货地址"
			    placeholder="请输入详细地址"
				readonly
				@blur="setAddress"
			  />
			</van-cell-group>
		</view>
		<!-- <view class="tips" v-if="shows == true">
			<text>备注</text>
			<textarea placeholder-style="color:#999999;font-size:24upx;" placeholder="选填" auto-height @blur="getTips" />
		</view> -->
		<view class="bottom_price" v-if="status == 2">
			<text class="submit" @tap="onConfirm" :style="{background: newColor.color}">确认收货</text>
		</view>
		<ourLoading isFullScreen :active="active" text="loading..." />
		<lb-picker
			:confirm-color="newColor.color"
			empty-text="暂无数据"
			radius="10px"
			mode="multiSelector"
			:level="3"
			@confirm="setCity"
			:list="areaLists"
			ref="picker"
			style="border-bottom: none;"
		></lb-picker>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {getIntegral} from '@/static/utils/ahth.js'
import LbPicker from '@/components/lb-picker/index.vue';
import areaList from '@/components/lb-picker/area-data-min.js';
export default {
	components: {
		uniPopup,
		LbPicker
	},
	data() {
		return {
			active: true,
			youhui: '',
			location:{},
			master:{},
			goodList:{},
			couponData:[],
			sumPrice: 0,
			title:'',
			couponId:'',
			group:0,
			iscart: 1,
			teamid:'',
			optionId:'',
			num:'',
			remark:'',
			shows: true,
			name:'',
			phone:'',
			areaLists:[],
			city:'',
			address:'',
			isPlant:'',
			propId:'',
			orderId:'',
			status: 0
		};
	},
	created() {
		this.areaLists = areaList
	},
	onLoad() {
		this.orderId = this.$Route.query.orderid ||''
		this.getOrderData()
		setTimeout(() => {
			this.active = false;
		}, 600);
	},
	methods: {
		getOrderData(){//获取订单详情
			this.request('CreditOrder/orderDetail',{
				order_id: this.orderId
			}).then(res=>{
				console.log(res);
				this.goodList = res.data.goods[0]
				this.name = res.data.order.receive_username
				this.phone = res.data.order.receive_mobile
				this.address = res.data.order.receive_address
				this.status = res.data.order.status
			})
		},
		onConfirm(row) {
			//确认收货
			uni.showModal({
				title: '确认收货',
				content: '确定收到订单商品？',
				confirmColor:this.newColor.color,
				success: res => {
					if (res.confirm) {
						this.request('CreditOrder/receiveOrder', {
							order_id: this.orderId
						}).then(res => {
							console.log(res);
							if(res.code == 200){
								uni.showToast({
									title:'确认收货成功!'
								})
								this.getOrderList()
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order{
	padding-bottom: 140upx;
}
.dianpu_list {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21px 0px rgba(255, 74, 44, 0.1);
	border-radius: 15upx;
	box-sizing: border-box;
	padding: 20upx 10upx;
	margin: 0 20upx;
	position: relative;
	display:inline-block;
	margin-top: 40upx;
	width: 95vw;
	// margin: 0 auto;
	> image {
		width: 80upx;
		height: 80upx;
		float: left;
		border-radius: 50%;
		margin-top: 20upx;
	}
	.right_box {
		float: right;
		text-align: left;
		margin-left: 20upx;
		overflow: hidden;
		width: 85%;
		margin-top: 20upx;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.p1 {
			// width: 100%;
			text-align: left;
			margin-bottom: 10upx;
			.text0 {
				font-size: 28upx;
				color: #333333;
				display: block;
			}
			.text2 {
				float: right;
				font-size: 24upx;
				color: #999999;
			}
		}
		.p2 {
			text-align: left;
			font-size: 24upx;
			color: #999999;
		}
		.p3 {
			overflow: hidden;
		}
		.text1 {
			font-size: 24upx;
			width: 80%;
			float: left;
			margin-left: 10upx;
			color: #999999;
		}
	}
	.p4 {
		padding-top: 30upx;
		width: 90%;
		overflow: hidden;
		line-height: 50upx;
		.text1 {
			float: left;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		image {
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			float: left;
			margin-left: 20upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			float: left;
		}
	}
	.moren {
		position: absolute;
		width: 140upx;
		height: 36upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 6upx;
		color: #ffffff;
		font-size: 22upx;
		top: -15upx;
		text-align: center;
	}
	.xuanze {
		width: 100upx;
		height: 46upx;
		line-height: 46upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 23upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		font-size: 22upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	margin: 0 20upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;
	image {
		width: 250upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 80upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		overflow: hidden;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		overflow: hidden;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(100, 100, 100, 1);
		}
	}
	.goumai {
		font-size: 24upx;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		background: rgba(242, 58, 58, 1);
		border-radius: 28upx;
		color: #ffffff;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 20upx;
	box-sizing: content-box;
	border-bottom: 1upx solid #f2f2f2;
	.text1 {
		font-size: 24upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 24upx;
		margin-right: 10upx;
		margin-top: 2upx;
		transition: all 0.5s;
		&:active {
			transform: scale(0.9);
		}
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
	}
}
.bottom_price {
	height: 98upx;
	line-height: 98upx;
	background: rgba(255, 255, 255, 1);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.allprice {
		font-size: 28upx;
		color: #333333;
		margin-left: 32upx;
		text {
			font-size: 32upx;
			color: #f23a3a;
			margin-left: 20upx;
		}
	}
	.submit {
		float: right;
		width: 290upx;
		height: 76upx;
		line-height: 76upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-right: 32upx;
		margin-top: 10upx;
	}
}
.rules {
	width: 100%;
	height: 60vh;
	background-color: #fff;
	border-top-left-radius: 30upx;
	border-top-right-radius: 30upx;
	box-sizing: border-box;
	padding: 40upx 30upx;
	padding-right: 0;
	padding-bottom: 10upx;
	label{
		// height:110upx;
		overflow: hidden;
		display: block;
		border-bottom: 1upx solid #F2F2F2;
		margin-bottom: 20upx;
		box-sizing: content-box;
		.youhui_list{
			float: left;
			width: 80%;
			.p1{
				font-size:28upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
			.p2{
				font-size:24upx;
				font-family:Droid Sans Fallback;
				font-weight:400;
				color:rgba(136,136,136,1);
				margin-top: 20upx;
				padding-bottom: 20upx;
			}
		}
		.radio{
			float: right;
			width: 20%;
			>radio{
				margin-left: 65upx;
				margin-top: 20upx;
			}
		}
	}
}
.enter{
	width:290upx;
	height:76upx;
	display: block;
	text-align: center;
	line-height: 76upx;
	background:rgba(255,0,0,1);
	border-radius:38upx;
	font-size:32upx;
	font-family:Droid Sans Fallback;
	font-weight:400;
	color:rgba(255,255,255,1);
	margin: 0 auto;
	margin-top: 10upx;
	margin-bottom: 10upx;
}
.tips {
	height: auto;
	overflow: hidden;
	padding: 20upx;
	// width: 100%;
	display: flex;
	border-bottom: 1rpx solid #f2f2f2;
	box-sizing: content-box;
	text {
		float: left;
		color: #333333;
		font-size: 24upx;
		width: 16vw;
	}
	/* #ifdef MP-WEIXIN */
	textarea {
		float: left;
		font-size: 24upx;
		// margin-top: 25upx;
		margin-top: 7upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */

	/* #ifdef H5 */
	textarea {
		float: left;
		font-size: 24upx;
		margin-top: 2upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */
}
</style>
